<template>

  <div class="innerBox">
    <div class="item">
      <div class="tipstext">
        <span>光标已锁定,请勿操作鼠标</span>
      </div>
      <div class="msg">
        <span>{{ fallbackMsg }}</span>
      </div>
      <div class="input">
        <el-input
          ref="scanValue"
          v-model="scanValue"
          placeholder="请进行扫码"
          clearable
          style="width: 400px"
          @change="handleScanInfo"
          @blur="handerBlur"
        />
      </div>
      <el-divider content-position="center"
        ><img
          src="@/assets/images/logo.jpg"
          alt=""
          :style="{ width: '20px', height: '20px' }"
      /></el-divider>
      <div class="descript">
        <div class="text">
          1.本页面为<span style="color: red" class="redtext">清洗机</span>后补扫
        </div>
        <div class="text">2.请确定鼠标光标在输入框内</div>
        <div class="text">3.确定扫码枪usb是否插入到电脑上</div>
        <div class="text">4.使用扫码枪对准玻璃上二维码进行补扫</div>
        <div class="text">
          5.扫码枪发出滴的声音后玻璃未动,请将玻璃从清洗机上拿下
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { updateGlassState } from "@/api/assembly/glass";
import { reScanBarCodeBehindCleanMachine } from "@/api/assembly/cage";
export default {
  name: "Pda",
  dicts: ["quartz_common_location"],
  data() {
    return {
      queryParams: {},
      scanValue: "",
      listGlass: [],
      timer: null,
      isTrue: false,
      fallbackMsg: null,
    };
  },
  mounted() {
    this.$refs.scanValue.focus();
    this.timer = setInterval(() => {
      this.$refs.scanValue.focus();
    }, 1000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    handerBlur() {
      this.isTrue = true;
    },
    handleScanInfo() {
      reScanBarCodeBehindCleanMachine({
        barCodeStr: this.scanValue.replace("，", ","),
      }).then((res) => {
        this.fallbackMsg = res.msg;
        this.$message.success(res.msg || "扫码成功");
      });
    },
    handleDamage(index) {
      if (this.listGlass.length > 0) {
        updateGlassState(this.listGlass[0].id, index).then((res) => {
          this.$modal.msgSuccess(res.msg);
        });
        this.listGlass = [];
        this.scanValue = "";
        this.$refs.scanValue.focus();
      }
    },
  },
};
</script>


<style lang="less" scoped>
.el-table td.el-table__cell div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/ .el-input--medium .el-input__inner {
  height: 45px;
}
.innerBox {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 20px;
  position: relative;
  .item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    .msg{
      position: absolute;
      left: 50%;
      top: 30%;
      font-size: 20px;
      font-weight: bold;
      transform: translateX(-50%);
    }
    .tipstext {
      height: 32%;
      font-weight: bold;
      font-size: 40px;
      margin-bottom: 20px;
      color: red;
      display: flex;
      align-items: center;
      letter-spacing: 3px;
    }
    .input {
      height: 120px;
      display: flex;
      align-items: center;
    }
  }
  .descript {
    display: flex;
    justify-content: center;
    letter-spacing: 2px;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    .text {
      margin-bottom: 10px;
    }
    .redtext {
      font-weight: bold;
    }
  }
}
</style>